<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>esd管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <link rel="stylesheet" href="/backend/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/backend/styles/list.css">
    <style>
        .grid-content {
            display: flex;
            align-items: center;
            height: 10vh;
        }

        .grid-cont-right {
            flex: 1;
            text-align: center;
            font-size: 0.8vw;
            color: #999;
        }
        .grid-num {
            font-size: 1.6vw;
            font-weight: bold;
        }
        .grid-con-icon {
            font-size: 2.6vw;
            width: 5vw;
            height: 10vh;
            text-align: center;
            line-height: 10vh;
            color: #fff;
        }
        .grid-num {
            color: rgb(45, 140, 240);
        }
        .user-info {
            display: flex;
            align-items: center;
            padding-bottom: 2vh;
            border-bottom: 0.1vw solid #ccc;
            margin-bottom: 2vh;
        }
        .user-avator {
            width: 11vh;
            height: 11vh;
            border-radius: 50%;
        }
        .user-info-cont {
            padding-left: 2.5vw;
            flex: 1;
            font-size: 0.8vw;
            color: #999;
        }
        .user-info-cont div:first-child {
            font-size: 1.6vw;
        }
        .user-info-list span {
            margin-left: 3.5vw;
        }
    
        .dashBoardDiv{
            display: flex;
            justify-content: center;
            align-items: center ;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="content-header">
        <h1>首页</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="user-info">
                                <img src="/backend/images/user2-160x160.jpg" class="user-avator">
                                <div class="user-info-cont" style="color: #3a8ee6">
                                    <div class="user-info-name">admin</div>
                                    <div>超级管理员</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="16">
                        <el-row>
                            <el-col :span="8">
                                <el-card shadow="hover" style="margin-left: 1vw; margin-top: 2.5vh;">
                                    <div class="grid-content grid-con-1">
                                        <img class="el-icon-lx-people grid-con-icon" src="/backend/images/line.png"/>
                                        <div class="grid-cont-right">
                                            <div class="grid-num">{{lineCount}}</div>
                                            <div>生产线数量</div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover" style="margin-left: 1vw; margin-top: 2.5vh;">
                                    <div class="grid-content grid-con-2">
                                        <img class="el-icon-lx-people grid-con-icon" src="/backend/images/endPoint.png"/>
                                        <div class="grid-cont-right">
                                            <div class="grid-num">{{deviceCount}}</div>
                                            <div>终端数量</div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover" style="margin-left: 1vw; margin-top: 2.5vh;">
                                    <div class="grid-content grid-con-3">
                                        <img class="el-icon-lx-people grid-con-icon" src="/backend/images/channel.png"/>
                                        <div class="grid-cont-right">
                                            <div class="grid-num">{{channelCount}}</div>
                                            <div>通道数量</div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 3vh;">
                    <div>
                        <el-descriptions title="服务器信息" direction="vertical" :column="5" border>
                            <el-descriptions-item label="SpringBoot">2.6.15</el-descriptions-item>
                            <el-descriptions-item label="服务器地址">127.0.0.1:8110</el-descriptions-item>
                            <el-descriptions-item label="JAVA版本">1.8.0_201</el-descriptions-item>
                            <el-descriptions-item label="MySql版本">8.0.32</el-descriptions-item>
                            <el-descriptions-item label="服务器版本">1.0.0</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-row>
                <el-row style="margin-top: 3vh;">
                    <el-col :span="5">
                        <img src="/backend/images/dashBoard1.png" style="width: 20vw;">
                        <div class="dashBoardDiv">
                            <span style="font-size: 0.8vw;">监控看板一（统计分析）</span>
                            <span><el-button style="font-size: 0.8vw;" type="text" @click="handleForward1()">点击跳转</el-button></span>
                        </div>
                    </el-col>
                    <el-col :span="5" style="margin-left: 1vw;">
                        <img src="/backend/images/dashBoard2.png" style="width: 20vw;">
                        <div class="dashBoardDiv">
                            <span style="font-size: 0.8vw;">监控看板二（所有终端监控）</span>
                            <span><el-button style="font-size: 0.8vw;" type="text" @click="handleForward2()">点击跳转</el-button></span>
                        </div>
                    </el-col>
                    <el-col :span="5" style="margin-left: 1vw;">
                        <img src="/backend/images/dashBoard3.png" style="width: 20vw;">
                        <div class="dashBoardDiv">
                            <span style="font-size: 0.8vw;">监控看板三（生产线结构）</span>
                            <span><el-button style="font-size: 0.8vw;" type="text" @click="handleForward3()">点击跳转</el-button></span>
                        </div>
                    </el-col>
                    <el-col :span="5" style="margin-left: 1vw;">
                        <img src="/backend/images/dashBoard4.png" style="width: 20vw;">
                        <div class="dashBoardDiv">
                            <span style="font-size: 0.8vw;">监控看板四（自定义选择生产线）</span>
                            <span><el-button style="font-size: 0.8vw;" type="text" @click="handleForward4()">点击跳转</el-button></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 1vh;">
                    <el-col :span="5">
                        <img src="/backend/images/dashBoardDust.png" style="width: 20vw;">
                        <div class="dashBoardDiv">
                            <span style="font-size: 0.8vw;">尘埃粒子看板</span>
                            <span><el-button style="font-size: 0.8vw;" type="text" @click="handleForward5()">点击跳转</el-button></span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="/backend/plugins/vue/vue.js"></script>
<script src="/backend/plugins/element-ui/index.js"></script>
<script src="/backend/plugins/axios/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            lineCount : 0 ,
            deviceCount : 0 ,
            channelCount : 0
        },
        created() {
            this.getCount();
        },
        methods: {
            getCount() {
                axios.get('/device/getCount').then( (response) => {
                    this.lineCount = response.data.lineCount;
                    this.deviceCount = response.data.deviceCount;
                    this.channelCount = response.data.channelCount;
                });
            },
            handleForward1(){
                window.open("/backend/page/dashBoard1.html");
            },
            handleForward2(){
                window.open("/backend/page/dashBoard2.html");
            },
            handleForward3(){
                window.open("/backend/page/dashBoard3.html");
            },
            handleForward4(){
                window.open("/backend/page/dashBoard4.html");
            },
            handleForward5(){
                window.open("/backend/page/dashBoardDust.html");
            }
        }
    });
</script>
</html>